export const MciSvgIcon = defineComponent({
  name: 'MciSvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#333'
    },
    width: {
      type: Number,
      default: 20
    },
    height: {
      type: Number,
      default: 20
    }
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`);
    // const { px2CssRem } = useRem();
    // const size = computed(() => px2CssRem(props.width));
    // const height = computed(() => {
    //   if (props.height) {
    //     return { height: px2CssRem(props.height) };
    //   }
    //   return { height: size.value };
    // });

    return () => (
      <svg
        class="mci-svg-icon outline-none"
        style={{
          width: props.width,
          height: props.height
        }}
        aria-hidden="true">
        <use href={symbolId.value} fill={props.color} />
      </svg>
    );
  }
});
